<script setup lang="ts">

const props = defineProps({
  class: { type: String },
  color: { type: String, default: '#f56c6c' },
  value: { type: Number }
})

</script>

<template>
<div class="badge" :class="props.class">
  <slot></slot>
  <span class="dot">{{ props.value }}</span>
</div>
</template>

<style scoped lang="less">
.badge {
  display: inline-block;
  position: relative;
  .dot {
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: v-bind('props.color');
    font-size: 12px;
    color: @box-text-color;
    position: absolute;
  }
}
</style>